<template>
  <div class="in">
    <div class="tit">
      <div class="ul1">
        <div>全部商品（{{table.length}}）</div>
      </div>
      <!-- <div class="ul2"><img class="img"
             src="@/assets/img/del.png"
             alt=""> 删除评价</div> -->
    </div>
    <div class="qie">
      <div class="cai">
        <el-table :data="table"
                  style="width: 100%">
          <!-- @selection-change='selection' -->
          <!-- <el-table-column type="selection"
                           width="55">
          </el-table-column> -->
          <el-table-column label="时间"
                           prop="date"
                           align='center'>
          </el-table-column>
          <el-table-column label="内容"
                           prop="nei"
                           align='center'>
          </el-table-column>
          <el-table-column label="商品信息"
                           prop="xinxi"
                           align='center'>
          </el-table-column>
          <el-table-column label="店铺名称"
                           prop="name"
                           align='center'>
          </el-table-column>
          <el-table-column label="金额（￥）"
                           prop="jiner"
                           align='center'>
          </el-table-column>
          <el-table-column label="操作"
                           align="center">
            <template slot-scope="scope">
              <el-button size="mini"
                         type="danger"
                         @click="del(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination background
                     layout="prev, pager, next"
                     :total="total"
                     @current-change="handleCurrentChange"
                     prev-text="上一页"
                     next-text="下一页"
                     class="aut">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      table: [],
      sum: 0,//数量
      qian: 0,//钱
      table1: [],
      currentPage: 1,
      total: 0,
    }
  },
  //注册组件
  components: {},
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.list1()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() { },
  //计算属性
  computed: {
  },
  //方法
  methods: {
    // 获取评价列表
    async list1() {
      let res = await this.$postRequest("/api/member/getUserCommentList", {
        userId: localStorage.getItem("userId"),
        pageSize: 10,
        pageNumber: this.currentPage,
      })
      // {
      //   date: '2020-12-12  17:52:00',
      //   nei: '产品不错，希望可以尽快推荐商用场景',
      //   name: '专业盾构施工服务',
      //   xinxi: '变压器维修检测服务 ￥699.00',
      //   jiner: '699',
      // }
      // console.log(res)
      this.total = res.data.total
      this.table = res.data.list.map(e => {
        return {
          date: e.createAt,
          nei: e.content,
          name: e.name,
          xinxi: e.goodsName,
          jiner: e.payment,
          id: e.commentId
        }
      })
    },
    selection(e) {
      console.log(e)
    },
    handleCurrentChange(currentPage) {
      console.log(currentPage); //点击第几页
      this.currentPage = currentPage
      this.list1()
    },
    // 删除
    async del(a, b) {
      console.log(a, b)
      let res = await this.$postRequest("/api/member/deleteUserComment", { userId: localStorage.getItem("userId"), commentId: b.id })
      console.log(res)
      if (res.code == 0) {
        this.table.splice(a, 1)
        this.$message.success('删除成功')
      } else {
        this.$message.error('获取数据失败')
      }
    },
  }
}
</script>
<style scoped lang='scss'>
.in {
  width: 100%;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #eeeeee;
  .tit {
    width: 100%;
    height: 50px;
    background: #ffffff;
    border-bottom: 1px solid #eeeeee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .ul1 {
      display: flex;
      height: 100%;
      align-items: center;
      div {
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
        margin-left: 20px;
      }
    }
    .ul2 {
      padding-right: 20px;
      cursor: pointer;
      color: #1a69e0;
      display: flex;
      align-items: center;
      .img {
        width: 20px;
        height: 20px;
        margin-right: 8px;
      }
      &:hover {
        opacity: 0.8;
      }
    }
  }
  .qie {
    width: 100%;
    .aut {
      text-align: center;
      margin-top: 14px;
      margin-bottom: 14px;
    }
    /deep/ .el-pagination button,
    .el-pagination span:not([class*='suffix']) {
      width: 60px;
    }
  }
}
</style>